<template>
    <div class="list-wrapper">
        <div class="list-top">
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                <el-tab-pane label="四选一" name="1">
                    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th class="img-text">
                                <router-link to="add">
                                    <img src="../../img/add.png" alt="">
                                </router-link>
                                添加
                            </th>
                            <th>序号</th>
                            <th width="180">试题编码</th>
                            <th>错题率</th>
                            <th>题干</th>
                            <th>选项A</th>
                            <th>选项B</th>
                            <th>选项C</th>
                            <th>选项D</th>
                            <th>参考答案</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <router-link v-bind="{to:'detail/'+item.id}">
                                    <img src="../../img/edit.gif" alt="">
                                </router-link>
                                <img src="../../img/del.png" alt="" @click="del(item.id)">
                            </td>
                            <td>{{index + 1}}</td>
                            <td>
                                {{'' + item.course_code + item.language + item.type + item.chapter + item.section + item.difficulty + item.sequence}}
                            </td>
                            <td>{{item.wrong}}%</td>
                            <td v-html="item.question"></td>
                            <td v-html="item.a"></td>
                            <td v-html="item.b"></td>
                            <td v-html="item.c"></td>
                            <td v-html="item.d"></td>
                            <td v-html="item.answer"></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="对错题" name="2">
                    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th class="img-text">
                                <router-link to="add">
                                    <img src="../../img/add.png" alt="">
                                </router-link>
                                添加
                            </th>
                            <th>序号</th>
                            <th>试题编码</th>
                            <th>错题率</th>
                            <th>题干</th>
                            <th>参考答案</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <router-link v-bind="{to:'detail/'+item.id}">
                                    <img src="../../img/edit.gif" alt="">
                                </router-link>
                                <img src="../../img/del.png" alt="" @click="del(item.id)">
                            </td>
                            <td>{{index + 1}}</td>
                            <td>
                                {{'' + item.course_code + item.language + item.type + item.chapter + item.section + item.difficulty + item.sequence}}
                            </td>
                            <td>{{item.wrong}}%</td>
                            <td>{{item.question}}</td>
                            <td>{{item.answer}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="简答题" name="3">
                    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th class="img-text">
                                <router-link to="add">
                                    <img src="../../img/add.png" alt="">
                                </router-link>
                                添加
                            </th>
                            <th>序号</th>
                            <th>试题编码</th>
                            <th>错题率</th>
                            <th>题干</th>
                            <th>参考答案</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>
                                <router-link v-bind="{to:'detail/'+item.id}">
                                    <img src="../../img/edit.gif" alt="">
                                </router-link>
                                <img src="../../img/del.png" alt="" @click="del(item.id)">
                            </td>
                            <td>{{index + 1}}</td>
                            <td>
                                {{'' + item.course_code + item.language + item.type + item.chapter + item.section + item.difficulty + item.sequence}}
                            </td>
                            <td>{{item.wrong}}%</td>
                            <td>{{item.question}}</td>
                            <td>{{item.answer}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
            
        </div>
        <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                       layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                type: "",
                typeLists: [],
                page: 1,
                total: 0,
                list: [],
                activeName2: "1",
                data: {}
            };
        },
        methods: {
            getList() {
                let data = this.data;
                data.page = this.page;
                this.apiPost("Train/question", data).then(res => {
                    this.list = res.list;
                    this.total = parseInt(res.total);
                });
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            search(val) {
                this.data.type = val;
                this.getList();
            },
            del(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {
                            id: id
                        };
                        this.apiPost("Train/questionDelete", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList();
                            }
                        });
                    })
                    .catch(() => {
                    });
            },
            handleClick(tab) {
                this.data.type = tab.name;
                this.getList();
            }
        },
        created() {
            this.data = Lockr.get("questionSearch");
            this.data.type = this.data.type ? this.data.type : 1;
            this.activeName2 = this.data.type + "";
            this.getList();
        }
    };
</script>
<style scoped>
    .list-wrapper{
        height: auto;
        padding-bottom: 20px;
    }
    .list-top {
        position: relative;
    }

    .list-top .upload {
        position: absolute;
        top: 20px;
        right: 30px;
    }
</style>
